<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>客服信息管理</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />

    <!-- BEGIN PAGE LEVEL STYLES -->
    <link href="<%=request.getContextPath()%>/themes/bootstrap/css/bootstrap-fileupload.css" rel="stylesheet" type="text/css" />

    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/themes/bootstrap/css/select2_metro.css" />

    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/themes/bootstrap/css/chosen.css" />

    <link href="<%=request.getContextPath()%>/themes/bootstrap/css/datepicker.css" rel="stylesheet" type="text/css"/>

    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/themes/bootstrap/css/multi-select-metro.css">

    <!-- END PAGE LEVEL STYLES -->

</head>
<body >
<c:set var="ctx" value="<%=request.getContextPath()%>"/>
<!--内容开始-->
<div class="row-fluid">

<div class="span12">

<!-- BEGIN SAMPLE FORM PORTLET-->

<div class="portlet box blue">

<div class="portlet-title">

    <div class="caption"><i class="icon-reorder"></i>添加客服</div>

</div>

<div class="portlet-body form">

<!-- BEGIN FORM-->

<form action="CustomerSer/addCustomerSer" class="form-horizontal" id="submit_form">

<div class="control-group">

    <label class="control-label">客服名称</label>

    <div class="controls">

        <input type="text" class="span6 m-wrap" name="userName" placeholder="请输入客服名称" >

    </div>

</div>

<div class="control-group">

    <label class="control-label">用户名</label>

    <div class="controls">

        <input class="span6 m-wrap" type="text" name="userAlias" placeholder="请输入用户名" >

    </div>

</div>

<div class="control-group">

    <label class="control-label">联系电话</label>

    <div class="controls">

        <input class="span6 m-wrap" type="text" name="userPhone" placeholder="输入联系电话" >

    </div>

</div>

<div class="control-group">

        <label class="control-label">设置提成</label>

    <div class="controls">

        <input type="text" class="span6 m-wrap popovers" name="percentage"  placeholder="输入提成" >

    </div>

</div>

<div class="control-group">

    <label class="control-label">客服等级</label>

    <div class="controls">

        <select class="span6 m-wrap" data-placeholder="客服等级" name="userLevel" tabindex="1">

            <option value="">请选择...</option>

            <option value="1">一级</option>

            <option value="2">二级</option>

            <option value="3">三级</option>

        </select>

    </div>

</div>

<div class="control-group">

    <label class="control-label">擅长项目<span class="required">*</span></label>

    <div class="controls">
        <div class="row-fluid">
            <div class="span6 m-wrap">
                <table class="table table-bordered table-hover" id="proTable">
                    <thead>
                    <tr>
                        <th>项目名称</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td  colspan="2" class="deleteflag"> 请选择项目</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="span4 m-wrap">
                <select id="partlist" class="span7 m-wrap" onchange="changePart()">
                    <c:forEach var="part" items="${partList}">
                        <option value="${part.id}">${part.partName}</option>
                    </c:forEach>
                </select>
                <select id="parlistDetail" class="span7 m-wrap" multiple="multiple" data-placeholder="选择项目" tabindex="1">
                    <c:forEach var="pro" items="${projectList}">
                        <option value="${pro.id}">${pro.projectName}</option>
                    </c:forEach>
                </select>
            </div>
        </div>
    </div>

</div>

<div class="form-actions">

    <button type="button" class="btn blue" id="add_customer_btn">提交</button>

    <button type="button" class="btn">取消</button>

</div>

</form>

<!-- END FORM-->

</div>

</div>

<!-- END SAMPLE FORM PORTLET-->

</div>

</div>

<!--内容结束 -->


<!-- BEGIN PAGE LEVEL PLUGINS -->

<script type="text/javascript" src="<%=request.getContextPath()%>/themes/bootstrap/js/bootstrap-fileupload.js"></script>

<script type="text/javascript" src="<%=request.getContextPath()%>/themes/bootstrap/js/jquery.validate.min.js"></script>

<script type="text/javascript" src="<%=request.getContextPath()%>/themes/bootstrap/js/additional-methods.min.js"></script>

<script type="text/javascript" src="<%=request.getContextPath()%>/themes/bootstrap/js/jquery.bootstrap.wizard.min.js"></script>

<script type="text/javascript" src="<%=request.getContextPath()%>/themes/bootstrap/js/chosen.jquery.min.js"></script>

<script type="text/javascript" src="<%=request.getContextPath()%>/themes/bootstrap/js/select2.min.js"></script>

<script type="text/javascript" src="<%=request.getContextPath()%>/themes/bootstrap/js/bootstrap-datepicker.js"></script>

<script type="text/javascript" src="<%=request.getContextPath()%>/themes/bootstrap/js/date.js"></script>


<!-- END PAGE LEVEL PLUGINS -->

<!-- BEGIN PAGE LEVEL SCRIPTS -->

<script src="<%=request.getContextPath()%>/themes/bootstrap/js/app.js"></script>

<script src="<%=request.getContextPath()%>/script/Area.js"></script>

<script src="<%=request.getContextPath()%>/script/common.js"></script>

<script src="<%=request.getContextPath()%>/script/hospital.js"></script>

<script src="<%=request.getContextPath()%>/script/AreaData_min.js"></script>

<!-- END PAGE LEVEL SCRIPTS -->
<script>

    jQuery(document).ready(function() {
        // initiate layout and plugins

        $('#add_customer_btn').click(function(){
            doAddHospital();
        });

        $("#parlistDetail").live("click",function(){
            $("#proTable").find(".deleteflag").parent().remove();
            var objValue=$("#parlistDetail option:selected").val();
            var objText=$("#parlistDetail option:selected").html();
            var i=0;
            $("#proTable").find("tr").each(function(){
                var tempVal=$(this).children("td").eq(0).html();
                if(tempVal==objText){
                    alert("此条项目已经被选择过了!");
                    i++;
                    return;
                }
            });
            if(i==0){
                var trHtml='<tr><td>'+objText+'<input type="hidden" value="'+objValue+'" name="projectID[0]" ><input type="hidden" value="'+objText+'" name="projectName[0]" ></td> ';
                trHtml+='<td><span class="label label-success" onclick="deleteRow(this)">删除</span></td></tr>';
                $("#proTable").append(trHtml);
                resetProjectsName();
            }
        });
    });

    function callbcakAddCustomer(cb){
        alert("保存成功!");
        window.location = "${ctx}/customerService/";
    }

    function doAddHospital(){

        getData("POST","${ctx}/customerService/saveCustomerService",true,getFormData($("#submit_form")),null,null,"callbcakAddCustomer");

    }

    function deleteRow(obj){
        $(obj).parent().parent().remove();
        resetProjectsName();
    }
    function  changePart(){
        var partId=$("#partlist option:selected").val();
        $.post("${ctx}/hospital/getPorjectListByPart",{"partId":partId},function(data){
            if(data&&data.code=="SUCCESS"){
                var pList= data.data;
                $("#parlistDetail").empty();
                for(var i=0;i<pList.length;i++){
                    $("#parlistDetail").append('<option value="'+pList[i].id+'">'+pList[i].projectName+'</option>');
                }
            }
        });
    }

</script>

</body>
</html>